<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style type="text/css">
        .error{
            border:1px solid #a10;
        }
    </style>
    <script type="text/javascript" src="../js/1.4.8/angular.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <!--<input type="number" class="form-control" ng-model="name"
        ng-minlength="3" ng-maxlength="10">
    <div>{{name}}</div>-->

    <div ng-controller="MainController">
        <form name="signForm" ng-submit="submitForm()">
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" class="form-control" name="username"
                       ng-model="username"
                       ng-class="{'error':signForm.username.$invalid && signForm.username.$touched}"
                       ng-minlength="3" ng-maxlength="10" required>
                <div ng-if="signForm.username.$invalid && signForm.username.$touched">用户名有误，请检查！</div>
                <div ng-if="signForm.username.$valid && signForm.username.$touched">
                    表单合法
                </div>
                <button class="btn btn-primary" type="submit" ng-disabled="signForm.$invalid">提交</button>
            </div>
        </form>
    </div>
</body>
</html>